<template name="selectCoupon">
	<view class="mask" v-if="isShow">
		<view class="couponCnt">
			<text class="iconfont icon-guanbi2fill" @tap.stop="toggle"></text>
			<view class="ttBox">
				<text>使用优惠券</text>
			</view>
			<view class="tsBox">
				<text class="iconfont icon-lingdang"></text>
				<text>优惠券均为一次使用，不找零、不兑换</text>
			</view>
			<scroll-view scroll-y="true" :style="{'max-height':scHeight+'px'}">
				<view class="couponList">
					<block v-for="(item,index) in resolveList">
						<view class="couponRow" @tap="toggleCoupon" :data-index="index">
							<view class="valBox">
								<text class="couponType">{{typeArr[item.coupon.source]}}</text>
								<text class="couponVal">￥{{item.coupon.discount}}</text>
							</view>
							<view class="couponInfo">
								<text>全品类（特例课程除外）</text>
								<text>{{item.coupon.startTime}}-{{item.coupon.endTime}}</text>
							</view>
							<text class="iconfont select" :class="[item.isSelected?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
						</view>
					</block>
				</view>
			</scroll-view>
			
			<button @tap.stop="shure">确认</button>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	export default{	
		name:'selectCoupon',		//组件名称
		// 传递参数
		props:{
			couponList:{
				type:Array,
				default:null
			},
			choseCoupon:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				isShow:false,
				scHeight:uni.upx2px(570),
				resolveList:[],
				// source 1牛牛券 2优惠券
				typeArr:['','牛牛券','优惠券']
			}
		},
		// 组件方法
		methods:{
			toggleCoupon(e){
				let _index=parseInt(e.currentTarget.dataset.index);
				
				this.resolveList= this.resolveList.map((x,i)=>{
					if(i==_index ){
						if(x.isSelected){
							x.isSelected=false;
							uni.$emit('shureCoupon',null);
						}else{
							x.isSelected=true;
							uni.$emit('shureCoupon',x);
						}
						
						
					}else{
						x.isSelected=false;

					}
					return x
				})
			},
			close(){
				this.isShow=false;
			},
			toggle(){
				this.isShow=!this.isShow;
			},
			shure(){
				this.isShow=false;
			},
			resolveData(){
				this.resolveList=this.couponList.map((x)=>{
					x.coupon.startTime=x.coupon.startTime.replace(/-/g,'.').split(' ')[0];
					x.coupon.endTime=x.coupon.endTime.replace(/-/g,'.').split(' ')[0];
					if(x.id==this.choseCoupon.id){
						x.isSelected=true;
					}else{
						x.isSelected=false;
					}
					return x;
				})
			}
		},
		created() {
			setTimeout(()=>{
				this.resolveData()
			},500)
		}
	}
</script>

<style lang="less">
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
		z-index: 998;
		display: flex;
		align-items: flex-end;
		.couponCnt{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #FFFFFF;
			position: relative;
			padding: 30upx 38upx;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			.ttBox{
				font-size: 40upx;
				margin-bottom: 20upx;
			}
			.icon-guanbi2fill{
				position: absolute;
				font-size: 48upx;
				right:20upx;
				top: 20upx;
				color: #e3e3e3;
			}
		}
		.tsBox{
			width: 100%;
			display: flex;
			align-items: center;
			// height: 50upx;
			border: 1px solid #ffdbd4;
			font-size: 28upx;
			background-color: #ffefec;
			color: #f08c75;
			padding: 10upx 20upx;
			.iconfont{
				margin-right: 16upx;
			}
		}
		.couponList{
			display: flex;
			flex-direction: column;
			padding: 20upx 0;
			width: 100%;
			.couponRow{
				border: 2upx solid #fe4f4a;
				border-radius: 16upx;
				display: flex;
				overflow: hidden;
				padding-top: 10upx;
				padding-bottom: 20upx;
				align-items: center;
				margin-bottom: 20upx;
				.valBox{
					display: flex;
					flex-direction: column;
					align-items: center;
					flex-shrink: 0;
					margin-right: 20upx;
					.couponType{
						display: block;
						background-color: #ff7a76;
						color: #FFFFFF;
						font-size: 32upx;
						line-height: 50upx;
						padding: 0 40upx 0 20upx;
						border-top-right-radius: 25upx;
						border-bottom-right-radius: 25upx;
					}
					.couponVal{
						font-size: 56upx;
						font-weight: bold;
						color: #fe4f4a;
					}
				}
				.couponInfo{
					display: flex;
					flex-direction: column;
					font-size: 28upx;
					color: #fe4f4a;
					flex-grow: 1;
				}
				.select{
					font-size: 60upx;
					margin: 0 30upx;
					color: #fe4f4a;
				}
				
			}
			.couponRow:last-child{
				margin-bottom: 0;
			}
		}
		button{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 32upx;
			border-radius: 40upx;
			background: linear-gradient(to right,#ff5d35,#ff2f2a);
		}
	}
</style>
